<template id="entityDialog">
  <div class="content">
    <el-dialog title="兑换实体卡" :visible.sync="options.isShow" width="80%">
      <section>
        <div class="notice">
          <div class="noticeLeft">
            <p class="star">*</p>
            <p>注意</p>
          </div>
          <div class="noticeRight">
            <p v-for="(item, index) in options.notice" :key="index">
              {{ item }}
            </p>
          </div>
        </div>
        <p class="addBtn" @click="addressFun('new')">新增地址</p>
      </section>
      <section class="addresses">
        <div
          class="address"
          v-for="(item, index) in options.list"
          :key="index"
          :class="{ isDefault: item.isDefault }"
        >
          <div class="addressTop">
            <div class="tittleAds">{{ item.title }}</div>
            <div class="defaultAds" v-if="item.isDefault">默认地址</div>
          </div>
          <div class="addressContent">
            <p>
              <span><span style="visibility: hidden;">我</span>收货人：</span
              >{{ item.person }}
            </p>
            <p><span>所在地区：</span>{{ item.area }}</p>
            <p><span>详细地址：</span>{{ item.address }}</p>
            <p><span>联系方式：</span>{{ item.phone }}</p>
            <p><span>固定电话：</span>{{ item.tel }}</p>
            <div class="addressBottom">
              <p><span>电子邮箱：</span>{{ item.email }}</p>
              <div
                class="setBtn"
                v-if="!item.isDefault"
                @click="setDefault(item)"
              >
                设为默认
              </div>
              <div class="editBtn" @click="editAddress('edit', item)">
                编辑地址
              </div>
            </div>
          </div>
        </div>
      </section>
      <section class="foot">
        <div class="confirmBtn" @click="confirm">确认兑换</div>
      </section>
    </el-dialog>
  </div>
</template>

<script>
export default {
  components: {},
  name: "",
  props: {
    options: {
      type: Object,
    },
  },
  data() {
    return {};
  },
  computed: {},
  methods: {
    confirm() {
      this.$emit("confirm");
    },
    setDefault(item) {
      this.$emit("default", item);
    },
    addressFun(type) {
      this.$emit("address", type, "");
    },
    editAddress(type, value) {
      this.$emit("edit", type, value);
    },
  },
  mounted() {},
};
</script>

<style lang="less" scoped>
.content {
  font-family: PingFangSC-Semibold, PingFang SC;
  /deep/.el-dialog__header {
    display: block !important;
    border-bottom: 1px solid #fff;
    .el-dialog__title {
      color: #fff;
    }
  }
  /deep/.el-dialog__body {
    height: auto !important;
    padding: 40px !important;
  }
  /deep/.el-dialog {
    width: 900px !important;
    height: 480px;
    background: #1e2020;
    border-radius: 5px;
  }
  .foot {
    display: flex;
    justify-content: end;
    .confirmBtn {
      display: flex;
      align-items: center;
      justify-content: center;
      border: none;
      background: none;
      width: 215px;
      height: 39px;
      background-image: url("../../../assets/images/pc_black/home/btn_color.png");
      background-position: center center;
      background-size: 100% 100%;
      font-size: 14px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #1e2020;
      line-height: 14px;
      cursor: pointer;
    }
  }

  .notice {
    display: flex;
    color: #fff;
    p {
      font-size: 16px;
    }
    .star {
      font-size: 20px;
      color: #f34c44;
      margin-right: 5px;
      margin-top: 5px;
    }
    .noticeLeft {
      word-break: keep-all;
      white-space: nowrap;
      display: flex;
    }
    .noticeRight {
      margin-left: 30px;
      line-height: 1.5;
    }
  }
  .addBtn {
    text-align: right;
    color: #fff;
    cursor: pointer;
  }
  .addresses {
    margin-top: 20px;
    max-height: 500px;
    overflow-y: scroll;
    .address {
      width: 100%;
      padding: 10px;
      border: 1px dashed #ccc;
      border-radius: 10px;
      margin-bottom: 30px;
      color: #999999;
      .addressTop {
        display: flex;
        align-items: center;
        .tittleAds {
          font-size: 20px;
        }
        .defaultAds {
          background-color: #00ffb0;
          padding: 1px 5px;
          margin-left: 10px;
        }
      }
      .addressContent {
        margin-top: 15px;
        font-size: 12px;
        .addressBottom {
          display: flex;
          align-items: center;
          justify-content: space-between;
          p {
            margin: 0;
          }
          .setBtn {
            margin-right: 10px;
            margin-left: auto;
            cursor: pointer;
            color: #fff;
          }
          .editBtn {
            cursor: pointer;
            color: #fff;
          }
        }
      }
    }
    .isDefault {
      border: 2px solid #ccc;
      color: #fff;
    }
  }
}
</style>
